<template>
	<view class="big">


		<view :hidden="user" class="popup_content">
			<image src="../../static/none.png" @click="hideDiv()" ></image>
			<view class="popup-cont">
				<p class="popup-title">450元优惠券包</p>
				<p class="popup-title2">券包规则详见活动规则</p>
				<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"
					@scrolltoupper="upper" @scrolltolower="lower">
					<view class="scroll-view-item scrolls flex">
						<p class="scrolls-l"><span>45</span>元</p>
						<view class="scrolls-r">
							<p class="r-p1">45元满减券
							</p>
							<p class="r-p2">满200元使用</p>
							<p class="r-p3">领取后当天生效</p>
						</view>
					</view>
					<view class="scroll-view-item scrolls flex">
						<p class="scrolls-l"><span>45</span>元</p>
						<view class="scrolls-r">
							<p class="r-p1">45元满减券
							</p>
							<p class="r-p2">满200元使用</p>
							<p class="r-p3">领取后当天生效</p>
						</view>
					</view>
					<view class="scroll-view-item scrolls flex">
						<p class="scrolls-l"><span>45</span>元</p>
						<view class="scrolls-r">
							<p class="r-p1">45元满减券
							</p>
							<p class="r-p2">满200元使用</p>
							<p class="r-p3">领取后当天生效</p>
						</view>
					</view>
					<view class="scroll-view-item scrolls flex">
						<p class="scrolls-l"><span>45</span>元</p>
						<view class="scrolls-r">
							<p class="r-p1">45元满减券
							</p>
							<p class="r-p2">满200元使用</p>
							<p class="r-p3">领取后当天生效</p>
						</view>
					</view>
					<view class="scroll-view-item scrolls flex">
						<p class="scrolls-l"><span>45</span>元</p>
						<view class="scrolls-r">
							<p class="r-p1">45元满减券
							</p>
							<p class="r-p2">满200元使用</p>
							<p class="r-p3">领取后当天生效</p>
						</view>
					</view>
					
					
					<view class="scroll-view-item scrolls-pp">到底啦</view>
				</scroll-view>
				<button class="scrolls-button">抢购</button>
			</view>
		</view>
		<view class="popup_overlay" :hidden="user"></view>
		<view class="banner">
			<image src="../../static/banner.jpg" style="width: 100%;"></image>
			<view class="right" @click="change()">活动规则</view>
		</view>
		<view class="contents">
			<view class="cont-top">
				<ul class="flex" >
					<li class="high">限时<br>秒杀</li>
					<li v-for="(item,index) in times" :key="index" :class='qqq===index?"coner":"con"'>
						<p class="p1">{{item.time}}</p>
						<p class="p2">{{item.content}}</p>
						
					</li>
					
					
					
				</ul>
				<view class="scroll" >
					<scroll-view :scroll-x="true">
						<view class="dataInfo" >
							<view class="dataList" v-for="(item,index) in rushs" :key="index" @click="showDiv()" >
								<view class="list flex2" :class='qqq===index?"coner":"ooo"'>
									<view class="list-l"  >
										<p class="blod">{{item.money}}</p>
										<p class="bold2" >{{item.content}}</p>
									</view>
									<view class="list-r" :class='aaa===index?"list-r":"ooq"'>{{item.rush}}</view>
								</view>
							</view>
							
						
						</view>
					</scroll-view>
				</view>


			</view>
			<view class="cont-bottom">
				<view class="head-nav">
					<scroll-view :scroll-x="true">
						<view class="dataInfo"  >			
							<view class="dataList">
								<view class="list2" :class="navIndex==1?'activite':''" @click="checkIndex(1)"  >全部</view>
							</view>
							<view class="dataList">
								<view class="list2" :class="navIndex==2?'activite':''" @click="checkIndex(2)" >福利特惠
								</view>
							</view>
							<view class="dataList">
								<view class="list2" :class="navIndex==3?'activite':''" @click="checkIndex(3)">加油常卖
								</view>
							</view>
							<view class="dataList">
								<view class="list2" :class="navIndex==4?'activite':''" @click="checkIndex(4)" >月油耗400
								</view>
							</view>
							<view class="dataList">
								<view class="list2" :class="navIndex==5?'activite':''" @click="checkIndex(5)" >月油耗600
								</view>
							</view>
						</view>
						
					</scroll-view>
				</view>
				<!-- 内容切换 -->
				<view class="content" v-if="navIndex==1" >
					<p class="cont-title">福利特惠</p>
					<view class="flth flex2" >
						<view class="flths" @click="changes()" v-for="(item,index) in list1" :key="index">
							<image src="../../static/1620.png"></image>
							<p class="flth-p">{{item.coupon}}</p>
							<p class="flth-p2">{{item.content}}</p>
							<view class="math flex2">
								<view class="math-l">
									<p class="math-p1">{{item.money}}</p>
									<p class="math-p2">{{item.sold}}</p>
								</view>
								<view class="math-r">{{item.rush}}</view>
							</view>
						</view>
					
						</view>
					</view>
					<p class="cont-title">加油常卖</p>
					<view class="flth flex2" >
						<view class="flths"  @click="changes()" v-for="(item,index) in list2" :key="index">
							<image src="../../static/1620.png"></image>
							<p class="flth-p">{{item.coupon}}</p>
							<p class="flth-p2">{{item.content}}</p>
							<view class="math flex2">
								<view class="math-l">
									<p class="math-p1">{{item.money}}</p>
									<p class="math-p2">{{item.sold}}</p>
								</view>
								<view class="math-r">{{item.rush}}</view>
							</view>
						</view>
						
						</view>
					</view>
					<p class="cont-title">月油耗400</p>
					<view class="flth flex2" >
					
						<view class="flths"  @click="changes()" v-for="(item,index) in list3" :key="index">
							<image src="../../static/1620.png"></image>
							<p class="flth-p">{{item.coupon}}</p>
							<p class="flth-p2">{{item.content}}</p>
							<view class="math flex2">
								<view class="math-l">
									<p class="math-p1">{{item.money}}</p>
									<p class="math-p2">{{item.sold}}</p>
								</view>
								<view class="math-r">{{item.rush}}</view>
							</view>
						</view>
					</view>
					<p class="cont-title">月油耗600</p>
					<view class="flth flex2" >
						
						
						
						<view class="flths"  @click="changes()" v-for="(item,index) in list4" :key="index"> 
							<image src="../../static/1620.png"></image>
							<p class="flth-p">{{item.coupon}}</p>
							<p class="flth-p2">{{item.content}}</p>
							<view class="math flex2">
								<view class="math-l">
									<p class="math-p1">{{item.money}}</p>
									<p class="math-p2">{{item.sold}}</p>
								</view>
								<view class="math-r">{{item.rush}}</view>
							</view>
						</view>
					</view>
					<p class="bottom-title"> - 自营省钱专区 -</p>
				</view>
				<view class="content" v-if="navIndex==2" @click="changes()" v-for="(item,index) in list1" :key="index" >
					<view class="flth flex2">
						
					
						

					</view>
					<p class="bottom-title"> - 自营省钱专区 -</p>
				</view>
				<view class="content" v-if="navIndex==3" v-for="(item,index) in list2" :key="index">
					<view class="flth flex2">
						
						

					</view>
					<p class="bottom-title"> - 自营省钱专区 -</p>
				</view>
				<view class="content" v-if="navIndex==4" v-for="(item,index) in list3" :key="index">
					<view class="flth flex2">
						

					</view>
					<p class="bottom-title"> - 自营省钱专区 -</p>
				</view>
				<view class="content" v-if="navIndex==5" v-for="(item,index) in list1" :key="index">
					<view class="flth flex2">
						
						
						
						

					</view>
					<p class="bottom-title"> - 自营省钱专区 -</p>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				navIndex: 1,
				user: true,
				feed: '',
        list1:[],
				list2:[],
				list3:[],
				list4:[],
				wholea:[],
				rushs:[],
				times:[],
				qqq:0,
				bbb:0,
					qq:0,
				aaa:0,							
				navList: ["选项卡一", "选项卡二", "选项卡3", "选项卡4", "选项卡5"],
				listIndex: 0
			}
		},
		onLoad() {
		    this.line(),
				this.line2(),
				this.line3(),
				this.line4(),
				this.rush(),
				this.whole(),
				this.time(), 
				
							uni.showLoading({
							    title: '加载中'
							}),
							setTimeout(function () {
									  uni.hideLoading();
									}, 500)
					

				// this.api()
				
		},
		
		// created() {
		//    // 获取所有招聘信息
		//    $http().then(res => {
		//      console.log(res)
		//    })
		//   },
		methods: {
			// api(){
			// $http().then(res => {
			//     console.log(333)
			//    }),
			// },
			

			
			change() {
				uni.navigateTo({
					url: "/pages/save/ruler"
				})
			},
			changes() {
				uni.navigateTo({
					url: "/pages/save/Special area"
				})
			},
			checkIndex(index) {
				this.navIndex = index;
			},

			checkListIndex(index) {
				this.listIndex = index;
			},
			showDiv() {
				this.user = false;
			},
			hideDiv() {
				this.user = true;
			},
			submit() {
				this.user = true;
				console.log(this.feed)
			},
			line: function() {
			   var that=this
			   uni.request({
			    url: "http://180.76.120.179:8081/tuanyou/area/benefits",
			    data: "",
			    success(res) {
			     // console.log(res.data.data)
			     var datas = res.data.data
			    that.list1=datas
			    }
			   })
			  },
				line2: function() {
				   var that=this
				   uni.request({
				    url: "http://180.76.120.179:8081/tuanyou/area/buy",
				    data: "",
				    success(res) {
				     // console.log(res.data.data)
				     var datas = res.data.data
				    that.list2=datas
				    }
				   })
				  },
					line3: function() {
					   var that=this
					   uni.request({
					    url: "http://180.76.120.179:8081/tuanyou/area/fuel",
					    data: "",
					    success(res) {
					     // console.log(res.data.data)
					     var datas = res.data.data
					    that.list3=datas
					    }
					   })
					  },
						line4: function() {
						   var that=this
						   uni.request({
						    url: "http://180.76.120.179:8081/tuanyou/area/fuels",
						    data: "",
						    success(res) {
						     // console.log(res.data.data)
						     var datas = res.data.data
						    that.list4=datas
						    }
						   })
						  },
							rush: function() {
							   var that=this
							   uni.request({
							    url: "http://180.76.120.179:8081/tuanyou/area/rush",
							    data:'',
							    success(res) {
							     
							      var datas = res.data.data
							     console.log(datas)
							      that.rushs= datas
							    }
							   })
							  },
								whole: function() {
								   var that=this
								   uni.request({
								    url: "http://180.76.120.179:8081/tuanyou/area/whole",
								    data:'',
								    success(res) {
								     
								     var datas = res.data.data
										console.log(datas)
								     that.wholea = datas
										 
								    }
								   })
								  },
									time: function() {
									   var that=this
									   uni.request({
									    url: "http://180.76.120.179:8081/tuanyou/area/time",
									    data:'',
									    success(res) {
									     
									     var datas = res.data.data
											console.log(datas)
									     that.times = datas
											 
									    }
									   })
									  },
							


		}
	}
</script>

<style>
	@import url("save.css");
</style>
